/** @jsxImportSource @emotion/react */
import * as React from "react";
import {  OriginalViewProps,  } from "../../common/base";
import { Instrument, Surface, Measurement} from "./elvBase";
import {createItem, EditorAreaConfig, } from "../../common/eHelper";
import {useRecordListSub} from "../../hook/useRecordListSub";

//原始记录，一一对应的报告的录入编辑数据，可打印。
//不需要每个verId新搞一个文件的，甚至不需要搞新的组件，可以只需内部逻辑处理。
//分离模式，编辑器脱离不在报告项目文本页面上面组装也就是原位置变换编辑框框或弹出模态对话框来输入的，把编辑器独立分离，点击一块区域路由器跳转独立的编辑页面，不一定一次跳转只针对单一行也能合并多行一起来编辑的。
//自定义路由器的配置拆分URL?action映射到页面组件；对应某报告模板下所有编辑修改组件；原始记录打印展示全部列表。項目標記符不能用ALL none preview printAll item1.1保留字。
const recordPrintList = [
  createItem('Instrument', <Instrument/>),
  createItem('Surface', <Surface/>),
  createItem('Measurement', <Measurement/>),
] as EditorAreaConfig[];


//【自定义分区块或分项目编辑器的拼凑】对recordPrintList扩展的;inspectionContent检验项目数量 rowBigItem.items[]每一个items都算单独一个； subItems[],names[''] addNames['']就不算独立的了。
//forwardRef实际上已经没用了，ref，也可改成简易组件模式。
//编辑器右半边页面的组织显示，可自定义，action路由自己构造。编辑器保存通过EditStorageContext来统一做。
//注意storage,outCome的报告存储字段名称唯一性要求！【实际上】单个区单项目编辑没必要加ref=clRefs[]就能够保存数据，全部ALL显示的才用到传递和保存。
//从RecordStarter延续来这里增加态路由赋值的qs参数，recordList= React.useMemo([,qs])配合更新，才能够真正做到点击切换ProjectList?from=5后面的from参数变动可以立刻引起编辑器组件显示内容的render立刻同步变化显示。
export const OriginalView=
  React.forwardRef((
      { action: modAction,  verId, repId='', }
    :OriginalViewProps, ref
  ) => {
     // const {generalFormat} =useGeneralFormat({verId, repId});

    //这个是给ALL：item1.1全部打印使用的，并非是唯一个小范围编辑器模式的。
    // const renderItemsContent =React.useMemo(() => {
    //   let seq = 0;
    //   let htmlTxts =[] as any[];
    //   inspectionContent.forEach((rowBigItem, x) => {
    //     rowBigItem && rowBigItem.items.forEach((item, y) => {
    //       if(item){
    //         seq += 1;
    //         const rowHead =<ItemUniversal key={seq} ref={clRefs.current![recordPrintList.length+seq-1]}  x={x}  y={y}
    //                                alone={false} show={action==='printAll'} inspectionContent={inspectionContent}
    //                                procedure={generalFormat[x]!.items[y]!.procedure}  details={generalFormat[x]!.items[y]!.details}
    //         />;
    //         htmlTxts.push(rowHead);
    //       }
    //     });
    //   });
    //   return ( <React.Fragment key={'item1.1'}>
    //     {htmlTxts}
    //   </React.Fragment> );
    // }, [action,  clRefs, generalFormat]); ref: React.Ref<unknown>, repId: string, recordPrintList: EditorAreaConfig[], modAction:
    const titleRender = (store: any) => {
      return <> { `[${store?.测厚表?.[0]?.no1}] `}
      </>;
    } //<SubRepController nestMd={nestMdConfig} repId={repId} verId={verId}/>
    const {list}=useRecordListSub(ref,repId,recordPrintList,modAction,verId,'THICKM_VS',titleRender);

    return <React.Fragment>
      {list}
    </React.Fragment>;
  } );

